<template>
  <view class="big">
    <u-tabs
      :list="list"
      bar-height="4"
      inactive-color="#AAAAAA"
      bar-width="48"
      :bar-style="barStyle"
      active-color="#001B0A"
      :is-scroll="false"
      :current="current"
      @change="change"
      bg-color=""
    ></u-tabs>

    <view v-show="couponsList" :class="item.status_name == '已失效' ? 'card1' : 'card'" v-for="(item, index) in couponsList" :key="index">
      <view class="card-right">
        <view class="left">
          {{ Number(item.amount).toFixed(0) }}
          <span>元</span>
        </view>
        <view class="right">
          <p class="card-info">无门槛可叠加使用</p>
          <strong class="card-time">有效期至：{{ item.gettim.end }}</strong>
        </view>
      </view>
      <view class="card-left" @click="make(item.status_name)">{{ item.status_name }}</view>
    </view>
    <!-- <view class="card1">
			<view class="card-right">
				<view class="left">
					5
					<span>元</span>
				</view>
				<view class="right">
					<p class="card-info">无门槛可叠加使用</p>
					<strong class="card-time">有效期至：2023-7-15</strong>
				</view>
			</view>
			<view class="card-left">已失效</view>
		</view> -->
    <view class="hiatus" v-show="couponsList == []">
      <view class="img">
        <image src="../../static/index/images/缺省页.png" mode=""></image>
        <text>没有可用的券哦</text>
      </view>
      <view class="button" @click="Recharge"><text>去充值领券</text></view>
    </view>
  </view>
</template>

<script>
import { coupons } from '@/api/api.js';
import { timestampToDate } from '@/utils/getInstance.js';
export default {
  data() {
    return {
      list: [
        {
          name: '全部'
        },
        {
          name: '未使用'
        },
        {
          name: '已使用'
        },
        {
          name: '已失效'
        }
      ],
      current: 0,
      barStyle: {
        background: '#34E276'
      },
      couponsList: []
    };
  },
  onShow() {
    this.getcoupons();
  },
  methods: {
    change(index) {
      this.current = index;
      this.getcoupons();
    },
    Recharge() {
      uni.navigateTo({
        url: '/pages/coupon/Recharge'
      });
    },
    async getcoupons() {
      let type;
      if (this.current == 0) {
        type = 5;
      } else if (this.current == 1) {
        type = 1;
      } else if (this.current == 2) {
        type = 3;
      } else if (this.current == 3) {
        type = 4;
      }
      let res = await coupons({ type: type });
      console.log(res);
      if (res.code == 1) {
        this.couponsList = res.data;
        this.couponsList.map((item, index) => {
          console.log(item.gettime);
          const formattedObj = {
            end: timestampToDate(item.gettime.end),
            start: timestampToDate(item.gettime.start)
          };
          item.gettim = formattedObj;
          return item;
        });
      } else {
        this.couponsList = [];
      }
    },
    make(type) {
      console.log(type);
      if (type == '未使用') {
        uni.redirectTo({
          url: '/pages/Shopping/Shopping'
        });
      }
    },
    timer(value) {
      var time = new Date(value);
      var year = time.getFullYear(); //年
      var mon = setDb(time.getMonth() + 1); //0
      var day = setDb(time.getDate()); //24
      var hour = setDb(time.getHours()); //时
      var min = setDb(time.getMinutes()); //分
      var sec = setDb(time.getSeconds()); //秒

      return {
        secs: sec,
        mins: min,
        hours: hour,
        days: day,
        mons: mon,
        years: year
      };
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.big {
  padding: 0 32rpx;
  // background-color: #ffffff;
  .u-tabs {
    background: rgba(170, 170, 170, 1);
  }
  .hiatus {
    width: 100%;
    margin-top: 292rpx;
    text-align: center;
    position: relative;
    .img {
      width: 100%;
      height: 486rpx;
      image {
        width: 100%;
        height: 100%;
      }
      text {
        width: 196rpx;
        height: 42rpx;
        font-size: 28rpx;
        font-family: Source Han Sans SC-Regular, Source Han Sans SC;
        font-weight: 400;
        color: #aaaaaa;
        line-height: 33rpx;
        position: absolute;
        top: 440rpx;
        left: 50%;

        transform: translate(-50%, 0);
      }
    }
    .button {
      width: 352rpx;
      height: 96rpx;
      background: #001b0a;
      border-radius: 52rpx 52rpx 52rpx 52rpx;
      font-size: 32rpx;
      font-family: Source Han Sans SC-Bold, Source Han Sans SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 96rpx;
      text-align: center;
      margin-left: 50%;
      transform: translate(-50%, 0);
      margin-top: 142rpx;
    }
  }
  .card {
    margin: 32rpx 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 148rpx;
    padding: 10px 0;
    background: #fff;
    border-radius: 4rpx;
    -webkit-mask-image: radial-gradient(circle at 460rpx 8rpx, transparent 8rpx, red 18rpx), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
    -webkit-mask-size: 100%, 4rpx 8rpx;
    -webkit-mask-repeat: repeat, repeat-y;
    -webkit-mask-position: 0 -4px, 460rpx;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188, 188, 188, 0.25);
    // background: linear-gradient(45deg, orange, red);

    .card-right {
      padding: 22rpx 32rpx 22rpx;
      display: flex;
      // flex: 1;
      // flex-direction: column;
      .left {
        width: 100rpx;
        font-size: 50rpx;
        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
        font-weight: bold;
        color: #e23434;
        line-height: 84rpx;
        margin-right: 40rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        span {
          font-size: 30rpx;
        }
      }
      .right {
        margin-top: 10rpx;
        .card-info {
          font-size: 28rpx;
          font-family: Source Han Sans SC-Regular, Source Han Sans SC;
          font-weight: 400;
          color: #001b0a;
        }
        .card-time {
          font-size: 24rpx;
          font-family: Source Han Sans SC-Regular, Source Han Sans SC;
          font-weight: 400;
          color: #aaaaaa;
        }
      }
    }
    .card-left {
      width: 144rpx;
      height: 64rpx;
      border-radius: 72rpx 72rpx 72rpx 72rpx;
      opacity: 1;
      border: 2rpx solid #e23434;
      font-size: 28rpx;
      font-family: Source Han Sans SC-Regular, Source Han Sans SC;
      font-weight: 400;
      color: #e23434;
      line-height: 64rpx;
      text-align: center;
      margin: 0 auto;
    }
  }
  .card1 {
    margin: 32rpx 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 148rpx;
    padding: 10px 0;
    background: #f0f0f0;
    border-radius: 4rpx;
    -webkit-mask-image: radial-gradient(circle at 460rpx 8rpx, transparent 8rpx, red 18rpx), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
    -webkit-mask-size: 100%, 4rpx 8rpx;
    -webkit-mask-repeat: repeat, repeat-y;
    -webkit-mask-position: 0 -4px, 460rpx;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    box-shadow: 0rpx 8rpx 36rpx 0rpx rgba(188, 188, 188, 1);
    // background: linear-gradient(45deg, orange, red);

    .card-right {
      padding: 22rpx 32rpx 22rpx;
      display: flex;
      // flex: 1;
      // flex-direction: column;
      .left {
        width: 100rpx;
        font-size: 50rpx;
        font-family: Source Han Sans SC-Bold, Source Han Sans SC;
        font-weight: bold;
        color: rgba(170, 170, 170, 1);
        line-height: 84rpx;
        margin-right: 40rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        span {
          font-size: 30rpx;
        }
      }
      .right {
        margin-top: 10rpx;
        .card-info {
          font-size: 28rpx;
          font-family: Source Han Sans SC-Regular, Source Han Sans SC;
          font-weight: 400;
          color: #001b0a;
        }
        .card-time {
          font-size: 24rpx;
          font-family: Source Han Sans SC-Regular, Source Han Sans SC;
          font-weight: 400;
          color: #aaaaaa;
        }
      }
    }
    .card-left {
      width: 144rpx;
      height: 64rpx;
      border-radius: 72rpx 72rpx 72rpx 72rpx;
      opacity: 1;
      border: 2rpx solid rgba(170, 170, 170, 1);
      font-size: 28rpx;
      font-family: Source Han Sans SC-Regular, Source Han Sans SC;
      font-weight: 400;
      color: rgba(170, 170, 170, 1);
      line-height: 64rpx;
      text-align: center;
      margin: 0 auto;
    }
  }
}
</style>
